<template>
  <view class="container">
    <view class="smart-form">
      <uni-forms ref="formRef" :label-width="100" :modelValue="form" label-position="left" :rules="rules">
        <view class="smart-form-group">
          <view class="smart-form-group-content">
            <uni-forms-item class="smart-form-item" label="设备SN" :label-width="80" name="serialno">
              <uni-easyinput class="uni-mt-5" trim="all" v-model="form.serialno" placeholder="请输入设备SN" />
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="warp">
      <button class="add-button" type="primary" @click="add">添加设备</button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { deviceApi } from '@/api/device/device-api.js';
import { regular } from '@/constants/regular-const';
import { smartSentry } from '@/lib/smart-sentry';
import { SmartLoading, SmartToast } from '@/lib/smart-support';
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';

// --------------------- 表单 ---------------------

const defaultFormData = {
  serialno: undefined,
};

let form = reactive({ ...defaultFormData });

const rules = {
  serialno: {
    rules: [{ required: true, errorMessage: '请输入设备SN' }],
  },
};

// ----------------------- 表单操作 ------------------------

const formRef = ref();

// 确定
function add() {
  formRef.value
    .validate()
    .then(async () => {
      try {
        await deviceApi.add(form);
        SmartToast.success('添加成功');
      } catch (error) {
        smartSentry.captureError(error);
      }
    })
    .catch((error) => {
      console.log('error', error);
      SmartToast.toast('参数验证错误，请仔细填写表单数据!');
    });
}

</script>

<style lang="scss" scoped>
.add-button {
  margin: 24px 27px 50px;
  height: 44px;
  border-radius: 22px;
  font-size: 15px;
  line-height: 44px;
  font-weight: 700;
  text-align: center;
  color: white;
  background-color: #007aff;
}

.uni-mt-5 {
  margin-bottom: 8px;
}

page {
  background-color: #f5f5f5;
}
</style>
